<template>
  <div class="detail-container">
    <div class="header">
      <el-steps
        style="width: 100%"
        :active="currentStep"
        finish-status="success"
        align-center
      >
        <!-- 0----提交订单 -->
        <el-step title="提交订单" />
        <!-- 1----支付订单 -->
        <el-step title="支付订单" />
        <!-- 2----平台发货 -->
        <el-step title="平台发货" />
        <!-- 4----确认收货/订单完成 -->
        <el-step title="已送达，等待取货" />
        <!-- 5----完成评价 -->
        <el-step title="确认收货，完成交易" />
      </el-steps>
    </div>
    <div class="el-card is-never-shadow" style="margin-top: 15px">
      <div class="el-card__body">
        <!-- <div class="operate-container"> -->
        <!-- <span  class="color-danger">当前订单状态：待发货</span> -->
        <!-- </div> -->
        <div style="margin-top: 20px">
          <span class="font-small">基本信息</span>
        </div>
        <div class="table-layout">
          <div class="el-row">
            <div class="table-cell-title el-col el-col-6">订单编号</div>
            <div class="table-cell-title el-col el-col-6">用户账号</div>
            <div class="table-cell-title el-col el-col-6">支付方式</div>
            <div class="table-cell-title el-col el-col-6">支付时间</div>
          </div>
          <div class="el-row">
            <div class="table-cell el-col el-col-6">
              {{ order.orderNo }}
            </div>
            <div class="table-cell el-col el-col-6">
              {{ order.user?.nickName }}
            </div>
            <div class="table-cell el-col el-col-6">
              {{ payTypeMap[order.payStatus] }}
            </div>
            <div class="table-cell el-col el-col-6">{{ order.payTime }}</div>
          </div>
        </div>
        <div style="margin-top: 20px">
          <span class="font-small">收货人信息</span>
        </div>
        <div class="table-layout">
          <div class="el-row">
            <div class="table-cell-title el-col el-col-8">收货人</div>
            <div class="table-cell-title el-col el-col-8">手机号码</div>
            <div class="table-cell-title el-col el-col-8">收货地址</div>
          </div>
          <div class="el-row">
            <div class="table-cell el-col el-col-8">
              {{ order.user?.nickName }}
            </div>
            <div class="table-cell el-col el-col-8">
              {{ order.user?.loginName }}
            </div>
            <div class="table-cell el-col el-col-8">
              {{ order.user?.address }}
            </div>
          </div>
        </div>
        <div style="margin-top: 20px">
          <span class="font-small">商品信息</span>
        </div>
        <div style="width: 100%; margin-top: 20px">
          <el-table
            :data="orderItems"
            border
            style="width: 100%"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              prop="goodsCoverImg"
              label="商品主图"
              width="180"
              align="center"
            >
              <template #default="scope">
                <div
                  class="row-image"
                  :style="
                    'background-image:url(' + scope.row.goodsCoverImg + ')'
                  "
                ></div>
              </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="商品名称" width="200" overflow="hidden" show-overflow-tooltip/>
            <el-table-column label="价格" width="180">
              <template #default="scope">
                {{ scope.row.sellingPrice.toFixed(2) }}
              </template>
            </el-table-column>
        
            <el-table-column prop="goodsCount" label="购买数量" width="150" />
            <el-table-column
              prop="item.description"
              label="备注"
              width="200"
            />
          </el-table>
        </div>
        <div style="float: right; margin: 20px">
          合计：<span class="color-danger">{{ oldPrice.toFixed(2) }}元</span>
        </div>
        <div style="margin-top: 60px">
          <span class="font-small">费用信息</span>
        </div>
        <div class="table-layout">
          <div class="el-row">
            <div class="table-cell-title el-col el-col-6">商品原价之和</div>
            <div class="table-cell-title el-col el-col-6">折扣金额</div>
            <div class="table-cell-title el-col el-col-6">活动优惠</div>
            <div class="table-cell-title el-col el-col-6">应付款金额</div>
          </div>
          <div class="el-row">
            <div class="table-cell el-col el-col-6">
              {{ oldPrice.toFixed(2) }}元
            </div>
            <div class="table-cell el-col el-col-6">
              -{{ countPrice.toFixed(2) }}元
            </div>
            <div class="table-cell el-col el-col-6">
              -{{ comPrice.toFixed(2) }}元
            </div>
            <div class="table-cell color-danger el-col el-col-6">
              {{ price }}元
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  Plus,
  Edit,
  Search,
  Refresh,
  Delete,
  CircleClose,
  CircleCheck,
} from "@element-plus/icons-vue";
import { ref, onMounted, toRaw, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { useRouter, useRoute} from "vue-router";
import orderApi from "@/api/OrderApi";
import orderItemApi from "@/api/OrderItem";
const router = useRoute();
const currentStep = ref(0);
currentStep.value = 1;
const orderTimes = ref("");
const order = ref({});
const orderItems = ref([]);
let price = 0;
let oldPrice = 0;
let countPrice = 0;
let comPrice = 0;
const payTypeMap = {
  1: "支付宝",
  0: "微信支付",
  2: "未支付",
};
onMounted(() => {
  const id = router.params.id;
  orderApi.findById(id).then((resp) => {
    order.value = resp.data;
    price = order.value.totalPrice;
    if (order.value.orderStatus === 0) {
      currentStep.value = 1;
    }
    if (order.value.orderStatus === 1) {
      currentStep.value = 2;
    }
    if (order.value.orderStatus === 2) {
      currentStep.value = 3;
    }
    if (order.value.orderStatus === 3) {
      currentStep.value = 4;
    }
    if (order.value.orderStatus === 4) {
      currentStep.value = 5;
    }
    orderItems.value = resp.data.orderItem;
        console.log(orderItems.value);
        // 计算每个订单项的小计
        resp.data.orderItem
          .map((item) => ({
            ...item,
            totalPrice: (item.sellingPrice * item.goodsCount).toFixed(2),
            itemPrice: item.sellingPrice.toFixed(2),
          }))
          .map((item) => {
            oldPrice += item.sellingPrice * item.goodsCount;
            return item;
          });
        countPrice = 0;
      })
      .catch((error) => {
        console.error("获取订单项失败:", error);
      });
     
  });

</script>
<style scoped>
.row-image {
  height: 80px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.detail-container {
  width: 80%;
  padding: 20px;
  margin: 20px auto;
}

.el-step__description.is-success {
  color: #67c23a;
}

.el-step__title.is-process {
  color: #67c23a;
}

.el-card {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
}

.el-card,
.el-message {
  border-radius: 4px;
  overflow: hidden;
}

.el-card__body {
  padding: 20px;
}

.operate-container {
  background: #f2f6fc;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.font-small {
  font-size: 14px;
  color: #606266;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell-title {
  background: #f2f6fc;
  color: #303133;
}

.table-cell-title,
.table-cell {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}

.el-col-4 {
  width: 16.66667%;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  color: #606266;
  overflow: hidden;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.el-col-6 {
  width: 25%;
}

element.style {
  float: right;
  margin: 20px;
}

.color-danger {
  color: #f56c6c;
}
</style>